<template>
    <div class="person">
        <h1>一辆{{car.brand }}车,价值{{car.price}}万</h1>
        <button @click="changePrice">修改价格</button>

        <h2>游戏列表:</h2>
        <ul>
            <li v-for="g in games":key="g.id">{{ g.name }}</li>
        </ul>
        <button @click="changeFirstGame">修改第一个游戏的名字</button>
    </hr>
    <h1>测试:{{ obj.a.b.c }}</h1>
    <button @click="changeObj">修改</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { reactive } from 'vue';
          //数据
          let car=reactive({brand:'奔驰',price:100})
          let games=reactive([
            {id:'asdwdd01',name:"王者荣耀"},
            {id:'asdwdd02',name:"和平精英"},
            {id:'asdwdd03',name:"我的世界"},
            {id:'asdwdd04',name:"原神"}
          ])
          let obj=reactive({a:{b:{c:666}}})
          function changePrice(){
            car.price+=10
            console.log(car.price)
          }

         function changeFirstGame(){
            games[0].name="植物大战僵尸"
            console.log('yes')
          }
          function changeObj(){
            obj.a.b.c+=10
          }
</script>

<style>
    .person{
        background-color:skyblue;
        box-shadow:0 0 10px;
        border-radius:10px;
        padding:20px;
    }
    button{
        margin:0 5px;
    }
</style>